<template>
  <view
    class="wrapper"
    @click="
      () => {
        bubbleBoxVisiable = false;
      }
    "
  >
    <!--  :title="$t('index.chats')" -->
    <navbar-module :showSearch="false" :leftType="1" @showBubbleBox="showBubbleBox">
      <view @click="handleToSearch">
        <input type="text" :placeholder="$t('search.Search...')" class="search-box" />
      </view>
    </navbar-module>

    <!-- <scroll-view scroll-x="true" style="z-index: 666; position: fixed">
			<view class="chat-type">
				<view v-for="t in moduleTypeList" :key="t.moduleType" class="chat-item" @click="selectModule(t)">
					<view :class="{ 'chat-item-active': selectModuleType == t.moduleType }">
						{{ $t(t.name) }}
					</view>
					<view class="num" :style="{
              width:
                unreadData[t.moduleType] >= 10
                  ? '42rpx'
                  : unreadData[t.moduleType] >= 99
                  ? '54rpx'
                  : '30rpx',
              'border-radius': unreadData[t.moduleType] >= 10 ? '15rpx' : '50%',
            }" :class="{ 'num-active': selectModuleType == t.moduleType }">{{
              unreadData[t.moduleType] > 99 ? "99+" : unreadData[t.moduleType]
            }}</view>
				</view>
			</view>
		</scroll-view> -->

    <view class="cell-group">
      <view class="cell-item" :class="{ 'cell-item-top': chatGPTRoom.isTop }">
        <!-- v-if="this.selectModuleType == 0" -->
        <view
          class="cell-line"
          :class="{ 'cell-line-top': chatGPTRoom.isTop }"
          @click="handleToPage(chatGPTRoom)"
        >
          <div class="avatar avatar-chatgpt">
            <ChatGPTLogo></ChatGPTLogo>
          </div>
          <view class="chat-info">
            <view class="line">
              <view class="nick-name">
                {{
                  chatGPTRoom.conversationType == 1
                    ? formatUserName(chatGPTRoom.info)
                    : chatGPTRoom.info && chatGPTRoom.info.groupName
                }}
              </view>
              <view class="time">
                <view
                  class="iconfont icon-guanbiyinliang-02 volume-icon"
                  v-if="chatGPTRoom.notificationLevel == 5"
                >
                </view>
                {{ chatGPTRoom.latestMessage && ChatListTime(chatGPTRoom) }}
                <!-- {{ weChatTimeFormat(chatGPTRoom.latestMessage.sentTime) }} -->
              </view>
            </view>
            <view class="line line-margin" v-if="chatGPTRoom.latestMessage">
              <view class="message omit">
                <text v-if="chatGPTRoom.hasMentioned">{{
                  $t("contacts.At")
                }}</text>
                {{ showLastMessages(item) }}
              </view>
              <view
                class="mark"
                :class="{ unMark: chatGPTRoom.notificationLevel == 5 }"
                v-if="chatGPTRoom.unreadMessageCount > 0"
              >
                {{
                  chatGPTRoom.unreadMessageCount > 99
                    ? "99+"
                    : chatGPTRoom.unreadMessageCount
                }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-swipe-action :show="true">
        <u-swipe-action-item
          v-for="item in pageChatListSort"
          :index="item.conversationType + item.targetId"
          :key="item.conversationType + item.targetId"
          :options="getActionOptions(item)"
          @click="sessionOperation($event, item)"
          :threshold="60"
          v-if="item.info"
        >
          <view class="cell-item" :class="{ 'cell-item-top': item.isTop }">
            <view
              class="cell-line"
              :class="{ 'cell-line-top': item.isTop }"
              @click="handleToPage(item)"
            >
              <image
                class="avatar"
                :src="require('@/static/image/chat/system.png')"
                v-if="item.conversationType == 6"
                mode="aspectFill"
              ></image>
              <image
                v-else-if="
                  item.conversationType == 1 &&
                  isPeopleAvatarExit(
                    item.info.avatarCompress ||
                      item.info.showUserAvatar ||
                      item.info.avatar
                  )
                "
                :src="
                  item.info.avatarCompress ||
                  item.info.showUserAvatar ||
                  item.info.avatar
                "
                class="avatar"
                mode="aspectFill"
              />
              <div
                v-else-if="item.conversationType == 1"
                class="avatar avator-font-setting"
                :style="{
                  background: `${getDefaultColor(item.info.avatarColorCode)}`,
                  fontSize: '32upx',
                }"
              >
                {{ formatUserName(item.info).slice(0, 1) }}
              </div>
              <image
                v-else-if="
                  item.conversationType == 3 &&
                  (item.info.avatarCompress || item.info.showAvatar)
                "
                :src="item.info.avatarCompress || item.info.showAvatar"
                class="avatar"
                mode="aspectFill"
              />
              <view
                class="avatar"
                v-else-if="item.conversationType == 3"
                :style="{
                  background: `${
                    item.info
                      ? item.info.defaultColor || item.info.background
                      : ''
                  }`,
                }"
              >
                {{
                  item.info
                    ? item.info.defaultName ||
                      (item.info.groupName && item.info.groupName.slice(0, 1))
                    : ""
                }}
              </view>
              <view class="chat-info">
                <view class="line">
                  <view class="nick-name">
                    {{
                      item.conversationType == 1
                        ? formatUserName(item.info)
                        : item.conversationType == 6
                        ? $t(formatUserName(item.info))
                        : item.info && item.info.groupName
                    }}{{
                      item.conversationType == 1
                        ? "-" + $t("discover.make-friends")
                        : item.conversationType == 2
                        ? "-" + $t("discover.exchange")
                        : item.conversationType == 3
                        ? "-" + $t("discover.Services-for-a-fee")
                        : item.conversationType == 4
                        ? "-" + $t("discover.Jobs")
                        : ""
                    }}
                  </view>
                  <view class="time">
                    <view
                      class="iconfont icon-guanbiyinliang-02 volume-icon"
                      v-if="
                        item.notificationLevel !== 0 &&
                        item.notificationLevel !== -1
                      "
                    ></view>
                    {{ item.latestMessage && ChatListTime(item) }}
                  </view>
                </view>
                <view class="line line-margin" v-if="item.latestMessage">
                  <view class="message omit">
                    <text v-if="item.hasMentioned">{{
                      $t("contacts.At")
                    }}</text>
                    <rich-text :nodes="showLastMessages(item)"></rich-text>
                  </view>
                  <view
                    class="mark"
                    :class="{
                      unMark:
                        item.notificationLevel == 5 ||
                        item.notificationLevel == 1,
                    }"
                    v-if="item.unreadMessageCount > 0"
                  >
                    {{
                      item.unreadMessageCount > 99
                        ? "99+"
                        : item.unreadMessageCount
                    }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <BubbleBox v-if="bubbleBoxVisiable">
      <view class="menu-box">
        <view
          class="menu-item"
          v-for="(item, index) in menuList"
          :key="index"
          @click="menuClick(item)"
        >
          {{ item.label }}
        </view>
      </view>
    </BubbleBox>
  </view>
</template>

<script>
import { mapState } from "vuex";
import NavbarModule from "@/components/NavbarModule.vue";
import TabBarModule from "@/components/TabBarModule.vue";
import BubbleBox from "@/components/BubbleBox.vue";
import { queryChangeip } from "@/services/login";
import { weChatTimeFormat } from "@/utils/common";
import {
  muteChange,
  getChatList,
  getRongIMChatList,
  clearMessageUnreadStatus,
} from "@/utils/RongIM";
import ChatGPTLogo from "./components/ChatGPTLogo.vue";
import { ChatListTimeFormat } from "@/utils/common.js";
import { getDefaultColor } from "@/utils/index";
export default {
  name: "Chat",
  components: {
    NavbarModule,
    TabBarModule,
    BubbleBox,
    ChatGPTLogo,
  },
  data() {
    return {
      moduleTypeList: [
        {
          name: "index.chats",
          moduleType: 0,
        },
        {
          name: "discover.Dating",
          moduleType: 1,
        },
        {
          name: "user.Trading",
          moduleType: 2,
        },
        {
          name: "discover.Services-for-a-fee",
          moduleType: 3,
        },
        {
          name: "discover.Recruitment",
          moduleType: 4,
        },
        {
          name: "discover.information",
          moduleType: 5,
        },
        {
          name: "discover.customer",
          moduleType: 6,
        },
      ],
      selectModuleType: 0,
      weChatTimeFormat,
      voicePath: "",
      bubbleBoxVisiable: false, //气泡框显隐
      chatGPTRoom: {
        conversationType: 3,
        targetId: "chatGPT",
        latestMessage: null,
        unreadMessageCount: 0,
        hasMentioned: false,
        lastUnreadTime: 0,
        notificationStatus: 2,
        notificationLevel: 0,
        isTop: true,
        channelId: "",
        unreadMentionedCount: 0,
        info: {
          groupId: "1634115866885005314",
          groupName: "ChatGPT",
          avatar: "http://www.omlook.com/imol/account.png",
          moduleType: -1,
          avatarCompress: "http://www.omlook.com/imol/account.png",
          avatarColorCode: 2,
          jyAvatar: null,
          defaultName: "C",
          showAvatar: "http://www.omlook.com/imol/account.png",
          defaultColor: "linear-gradient(0deg, #FD644F 0%, #F28E26 100%)",
        },
      },
    };
  },
  computed: {
    ...mapState([
      "connectStatus",
      "userId",
      "chatList",
      "token",
      "pageChatList",
    ]),
    unreadData() {
      var obj = {};
      this.moduleTypeList.forEach((t) => {
        var total = 0;
        if (t.moduleType == 0) {
          var arr = this.chatList.filter(
            (o) =>
              o.info && Object.keys(o.info).length !== 0 && !o.info.moduleType
          );
        } else {
          var arr = this.chatList.filter(
            (o) =>
              o.info &&
              Object.keys(o.info).length !== 0 &&
              o.info.moduleType == t.moduleType
          );
        }

        arr.map((t) => {
          total += t.unreadMessageCount;
        });
        obj[t.moduleType] = total;
      });
      return obj;
    },
    pageChatListSort() {
      if (this.pageChatList && this.pageChatList.length > 0) {
        let list = this.pageChatList.filter(
          (o) => o.info && Object.keys(o.info).length !== 0
        );
        console.log(this.selectModuleType, list,'444');
        // switch (this.selectModuleType) {
        // 	case 0:
        // 		list = list
        // 			.filter(
        // 				(t) => t.info?.moduleType === 0 || !t.info?.moduleType
        // 			)
        // 		break;
        // 	case 1:
        // 		list = list.filter((t) => t.info?.moduleType === 1)
        // 		break;
        // 	case 2:
        // 		list = list.filter((t) => t.info?.moduleType === 2)
        // 		break;
        // 	case 3:
        // 		list = list.filter((t) => t.info?.moduleType === 3)
        // 		break;
        // 	case 4:
        // 		list = list.filter((t) => t.info?.moduleType === 4)
        // 		break;
        // 	case 5:
        // 		list = list.filter((t) => t.info?.moduleType === 5)
        // 		break;
        // 	case 6:
        // 		list = list.filter((t) => t.info?.moduleType === 6)
        // 		break;
        // 	default:
        // 		break;
        // }

        const sort = [0, 6, 5, 4, 2, 3, 1];
        list.sort((a, b) => {
          if (a.isTop == b.isTop) {
            const aType = sort[a.conversationType];
            const bType = sort[b.conversationType];
            return aType === bType
              ? b.lastSentTime - a.lastSentTime
              : aType > bType
              ? -1
              : 1;
          }
          return b.isTop - a.isTop;
        });

        return list;

        //     if (this.selectModuleType == 0) {
        //       //去除交友的
        //       let list = this.pageChatList
        //         .filter(
        //           // (o) => this.filterId.indexOf(Number.parseInt(o.targetId)) == -1
        //           (o) => {
        //             var moduleType = 0;
        //             if (
        //               o.info &&
        //               Object.keys(o.info).length !== 0 &&
        //               o.info.moduleType
        //             ) {
        //               moduleType = o.info.moduleType || 0;
        //             }
        //             return (
        //               o.info && Object.keys(o.info).length !== 0 && moduleType == 0
        //             );
        //           }
        //         )
        //         .sort((a, b) => {
        //           if (a.isTop === b.isTop) {
        //             return b.lastUnreadTime - a.lastUnreadTime;
        //           }
        //           return b.isTop - a.isTop;
        //         });
        //       return list;
        //     } else {
        //       var data = this.$store.state.moduleGroupInfo[this.selectModuleType];
        //       if (data && Array.isArray(data)) {
        //         var ids = [];
        //         data.map((item) => {
        //           ids.push(item.groupId);
        //         });
        //         //去除交友的
        //         let list = this.pageChatList
        //           .filter(
        //             // (o) => this.filterId.indexOf(Number.parseInt(o.targetId)) > -1
        //             (o) => {
        //               var moduleType = 0;
        //               if (
        //                 o.info &&
        //                 Object.keys(o.info).length !== 0 &&
        //                 o.info.moduleType
        //               ) {
        //                 moduleType = o.info.moduleType || 0;
        //               }
        //               console.log(moduleType);
        //               return (
        //                 o.info &&
        //                 Object.keys(o.info).length !== 0 &&
        //                 moduleType == 1
        //               );
        //             }
        //           )
        //           .sort((a, b) => {
        //             if (a.isTop === b.isTop) {
        //               return b.lastUnreadTime - a.lastUnreadTime;
        //             }
        //             return b.isTop - a.isTop;
        //           });
        //         return list;
        //       } else return [];
        //     }
      } else return [];
    },
    filterId() {
      var ids = [];
      for (const key in this.$store.state.moduleGroupInfo) {
        if (
          this.$store.state.moduleGroupInfo[key] &&
          Array.isArray(this.$store.state.moduleGroupInfo[key])
        ) {
          this.$store.state.moduleGroupInfo[key].map((item) => {
            ids.push(item.groupId);
          });
        }
      }
      return ids;
    },
    menuList() {
      return [
        {
          label: this.$t("discover.make-friends"), // 约会
          url: "/pages/makefriends/MakeFriends",
          type: 1,
          typeName: "Dating",
        },
        {
          label: this.$t("discover.exchange"),
          url: "/pagesUser/bourse/release",
          type: 2,
          typeName: "Transaction",
        },
        {
          label: this.$t("discover.Offer-a-reward"),
          url: "/pagesDiscover/reward/RewardRelease",
          type: 2,
          typeName: "Reward",
        },
        {
          label: this.$t("discover.information"),
          url: "/pagesDiscover/information/InfoRelease",
          type: 2,
          typeName: "Recruitment",
        },
        {
          label: this.$t("discover.Recruitment"),
          url: "/pagesDiscover/recruitment/RecruitmentRelease",
          type: 2,
          typeName: "Recruitment",
        },
      ];
    },
  },
  watch: {
    connectStatus(val) {
      if (val === 2) {
        this._getChatList();
      }
    },
    chatList(val) {
      this.$store.commit("FILTER_PAGE_CHAT_LIST", val);
      //排除交友的list
      // this.pageChatList = val.filter((o) => o.info != null);
    },
  },
  methods: {
    getDefaultColor,
    ChatListTimeFormat,
    handleToSearch() {
      uni.navigateTo({
        url: "/pagesTool/search/Search",
      });
    },
    menuClick(item) {
      if (this.token) {
        if (item.typeName === "Dating") {
          if (!this.$store.state.friendsInformation.userPersonalsId) {
            this.gotoPage("/pagesDiscover/friendsInformation/EditData");
          } else {
            this.gotoPage(
              "/pagesDiscover/friendsInformation/FriendsInformation"
            );
          }
          return;
        }
        if (item.typeName === "Transaction") {
          queryChangeip().then((res) => {
            console.log(res.result.data);
            if (res.result.data === "中国") {
              uni.showToast({
                title: this.$t("newDeal.msg"),
                icon: "none",
              });
            } else {
              this.gotoPage(item.url, item.type);
            }
          });
          return;
        }

        this.gotoPage(item.url, item.type);
      } else {
        uni.navigateTo({
          url: "/pages/login/Login",
        });
      }
    },
    ChatListTime(item) {
      try {
        if (item.latestMessage) {
          if (item.latestMessage.messageType === "OL:ReadStatus") {
            this.$set(
              item,
              "lastSentTime",
              item.latestMessage.content.preMsg.latestMessage.sentTime
            );
            return this.ChatListTimeFormat(
              item.latestMessage.content.preMsg.latestMessage.sentTime
            );
          } else if (item.latestMessage.messageType === "RC:RcCmd") {
            this.$set(
              item,
              "lastSentTime",
              item.latestMessage.content.extra.latestMessage.sentTime
            );
            return this.ChatListTimeFormat(
              item.latestMessage.content.extra.latestMessage.sentTime
            );
          } else {
            this.$set(item, "lastSentTime", item.latestMessage.sentTime);
            return this.ChatListTimeFormat(item.latestMessage.sentTime);
          }
        } else {
          item.lastSentTime = 0;
          return "";
        }
      } catch (error) {
        item.lastSentTime = 0;
        return "";
      }
    },
    //选择模块
    selectModule({ moduleType }) {
      this.selectModuleType = moduleType;
      console.log("selectModuleType", this.selectModuleType);
    },
    //是否显示@
    isAt(data) {
      const { latestMessage } = data;
      if (latestMessage.content.mentionedInfo) {
        if (
          latestMessage.content.mentionedInfo.userIdList.findIndex(
            (o) => o == this.$store.state.userId
          ) > -1
        )
          return true;
      }

      return false;
    },
    // 气泡框显隐
    showBubbleBox() {
      this.bubbleBoxVisiable = !this.bubbleBoxVisiable;
    },
    getActionOptions(item) {
      let text1, icon1, width1, text2, icon2, width2, text3, width3;

      if (item.isTop) {
        text1 = this.$t("chat.Unpin");
        icon1 = "icon-quxiaozhiding";
        width1 = "140rpx";
      } else {
        text1 = this.$t("chat.Pin");
        icon1 = "icon-zhiding1";
        width1 = "140rpx";
      }
      if (item.notificationLevel == 0 || item.notificationLevel == -1) {
        text2 = this.$t("chat.Mute");
        icon2 = "icon-guanbiyinliang-02";
        width2 = "140rpx";
      } else {
        text2 = this.$t("chat.Unmute");
        icon2 = "icon-yinliangjian";
        width2 = "156rpx";
      }
      text3 = this.$t("chat.Delete");
      width3 = "140rpx";

      // 不同语言设置不同宽度,不设宽度会导致渲染有问题
      if (this.localesCode == "zh-Hans") {
        // 中文
        if (item.isTop) {
          width1 = "160rpx";
        } else {
          width1 = "140rpx";
        }
        if (item.notificationLevel == 0 || item.notificationLevel == -1) {
          width2 = "140rpx";
        } else {
          width2 = "180rpx";
        }
      } else if (this.localesCode == "ru") {
        // 俄语
        if (item.isTop) {
          width1 = "184rpx";
        }
        if (item.notificationLevel == 0 || item.notificationLevel == -1) {
          width2 = "142rpx";
        } else {
          width2 = "180rpx";
        }
        width3 = "156rpx";
      }

      return [
        {
          text: text1,
          icon: icon1,
          style: {
            boxSizing: "border-box",
            width: width1,
            backgroundColor: "#61BDB2",
            display: "flex",
            flexDirection: "column",
            fontSize: "24rpx",
          },
          iconStyle: {
            fontSize: "50rpx",
            marginBottom: "24rpx",
            color: "#FFF",
          },
        },
        {
          text: text2,
          icon: icon2,
          style: {
            boxSizing: "border-box",
            width: width2,
            backgroundColor: "#F3B852",
            display: "flex",
            flexDirection: "column",
            fontSize: "24rpx",
          },
          iconStyle: {
            fontSize: "50rpx",
            marginBottom: "24rpx",
            color: "#FFF",
          },
        },
        {
          text: text3,
          icon: "icon-shanchu3",
          style: {
            boxSizing: "border-box",
            width: width3,
            backgroundColor: "#FE6600",
            display: "flex",
            flexDirection: "column",
            fontSize: "24rpx",
          },
          iconStyle: {
            fontSize: "50rpx",
            marginBottom: "24rpx",
            color: "#FFF",
          },
        },
      ];
    },
    // 会话操作回调
    sessionOperation(value, item) {
      uni.showLoading();
      switch (value.index) {
        case 0: // 置顶功能
          this._setConversationToTop(item);
          break;
        case 1: // 消息免打扰功能
          this._setConversationNotificationLevel(item);
          break;
        case 2: // 删除功能
          this._removeConversation(item);
          break;
        default:
          break;
      }
    },
    // 会话置顶功能
    _setConversationToTop(item) {
      const conversationType = item.conversationType;
      const targetId = item.targetId;
      const isTop = !item.isTop;
      this.$RongIMLib
        .setConversationToTop(
          {
            conversationType,
            targetId,
          },
          isTop
        )
        .then(({ code }) => {
          // 设置会话置顶成功
          if (!code) {
            getRongIMChatList();
            setTimeout(() => {
              this.$forceUpdate();
            }, 1000);
          }
        });
    },
    // 会话消息免打扰功能
    async _setConversationNotificationLevel(item) {
      uni.showLoading();
      const conversationType = item.conversationType;
      const targetId = item.targetId;
      let type;
      if (item.notificationLevel == 0 || item.notificationLevel == -1) {
        type = 1;
      } else {
        type = 0;
      }
      const options = {
        targetId,
        conversationType,
        type,
      };
      await muteChange(options);
      getRongIMChatList();
      uni.hideLoading();

      // const conversationType = item.conversationType;
      // const targetId = item.targetId;
      // let notificationLevel =
      //   this.$RongIMLib.NotificationLevel.NOT_MESSAGE_NOTIFICATION;
      // if (item.notificationLevel == 0 || item.notificationLevel == -1) {
      //   notificationLevel =
      //     this.$RongIMLib.NotificationLevel.NOT_MESSAGE_NOTIFICATION;
      // } else {
      //   notificationLevel = this.$RongIMLib.NotificationLevel.ALL_MESSAGE;
      // }

      // this.$RongIMLib
      //   .setConversationNotificationLevel(
      //     {
      //       conversationType,
      //       targetId,
      //     },
      //     notificationLevel
      //   )
      //   .then(({ code }) => {
      //     // 设置免打扰状态成功
      //     if (!code) {
      //       getRongIMChatList();
      //       setTimeout(() => {
      //         this.$forceUpdate();
      //       }, 1000);
      //     }
      //   });
    },
    // 会话删除功能
    _removeConversation(item) {
      const conversationType = item.conversationType;
      const targetId = item.targetId;
      this.$RongIMLib
        .removeConversation({
          conversationType,
          targetId: targetId,
        })
        .then((res) => {
          // 删除指定会话成功
          if (res.code === 0) {
            getRongIMChatList();
          } else {
            console.log(res.code, res.msg);
          }
        });
    },
    // 获取所有会话未读数
    async getUnreadMessage() {
      const that = this;
      const conversationTypes = [
        this.$RongIMLib.ConversationType.PRIVATE,
        this.$RongIMLib.ConversationType.GROUP,
      ];
      this.$RongIMLib
        .getUnreadConversationList(conversationTypes)
        .then((res) => {
          if (res.code === 0) {
            if (!res.data.length) return;
            res.data.forEach((element) => {
              const index = that.pageChatList.findIndex(
                (item) => item.targetId === element.targetId
              );
              const newData = {
                ...that.pageChatList[index],
                unreadMentionedCount: element.unreadMentionedCount,
                unreadMessageCount: element.unreadMessageCount,
              };
              this.$store.commit("UPDATE_PAGE_CHAT_LIST", {
                index,
                newData,
              });
              // that.pageChatList[index] = newData
              // that.$set(that.pageChatList, );
            });
          } else {
            console.log(res.code, res.msg);
          }
        });
    },

    gotoPage(url, type) {
      if (type == 1) {
        uni.switchTab({
          url,
        });
        return;
      }
      uni.navigateTo({
        url,
      });
    },

    //侧边栏点击
    toPage(item) {
      console.log(item);
    },
    // 跳转页面
    handleToPage(item) {
      console.log("conversationType-------->", item.conversationType, item);
      if (!this.token && item.targetId !== "chatGPT") {
        return uni.navigateTo({
          url: "/pages/login/Login",
        });
      }
      if (item.conversationType == 1 || item.conversationType == 6) {
        console.log("1");
        clearMessageUnreadStatus(item.targetId, item.conversationType);
        uni.navigateTo({
          url: `/pages/chat/PersonalChat?targetId=${item.targetId}&conversationType=${item.conversationType}`,
        });
      } else if (item.conversationType == 3) {
        if (item.info && item.info.moduleType === -1) {
          console.log("2");
          // this.gotoPage("/pages/chat/ChatGPT");
          this.gotoPage("/pages/chat/GptRoom");
          return;
        }
        clearMessageUnreadStatus(item.targetId, item.conversationType);
        var isModule = this.filterId.indexOf(item.targetId) > -1;
        if (item.info.moduleType == 1) {
          console.log("3");
          uni.navigateTo({
            url: `/pages/chat/GroupChat?isFriendGroup=true&groupId=${item.targetId}&isModule=true`,
          });
        } else {
          console.log("4");
          uni.navigateTo({
            url: `/pages/chat/GroupChat?groupId=${item.targetId}&isModule=${isModule}`,
          });
        }
      }
    },
    async _getChatList() {
      await getChatList();
    },
    async init() {
      await this._getChatList();
    },
  },
  onShow() {
    // if (!this.token) {
    //   return uni.navigateTo({
    //     url: "/pages/login/Login",
    //   });
    // }
    this.bubbleBoxVisiable = false;
    if (this.connectStatus !== 2) return;
    this.init();
  },
  onLoad() {},
  onPullDownRefresh() {
    this._getChatList();
  },
};
</script>

<style lang="scss" scoped>
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}

.search-box {
  width: 460rpx;
  height: 60rpx;
  border: 1px solid #b9ddd9;
  border-radius: 14rpx;
  font-size: 28rpx;
  padding-left: 60rpx;
  background: url(/static/image/search.png) 16rpx center / 40rpx 40rpx no-repeat;
  pointer-events: none;
}

.wrapper {
  width: 100%;
  background: #f6f6f6;
  min-height: 100vh;

  .cell-group {
    width: 750rpx;
    box-sizing: border-box;
    background: #ffffff;
    // margin-top: 72rpx;

    &.cell-group > view:nth-last-child(1) {
      border-bottom: none;
    }

    .cell-line {
      height: 162upx;
      display: flex;
      align-items: center;
      border-bottom: 2upx solid #f6f6f6;

      .avatar {
        margin-right: 30upx;
        flex-shrink: 0;
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        text-align: center;
        line-height: 100upx;
        font-size: 32upx;
        font-weight: bold;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .avatar-chatgpt {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .chat-info {
        flex: 1;
        overflow: hidden;

        .line {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &.line-margin {
            margin-top: 25upx;
          }

          .nick-name {
            font-size: 30upx;
            font-weight: 500;
            color: #000000;
            // line-height: 1em;
            overflow: hidden;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .time {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            font-size: 24upx;
            font-weight: 400;
            color: #878787;

            .volume-icon {
              color: #878787;
              font-size: 34rpx;
              margin-right: 10rpx;
            }
          }

          .mentionedContent {
            color: #fe6600;
            display: inline-block;
            margin-right: 24rpx;
          }

          .message {
            font-size: 26upx;
            font-weight: 400;
            color: #878787;
            // line-height: 1.2;
            // overflow: hidden;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
          }

          .mark {
            flex-shrink: 0;
            box-sizing: border-box;
            padding: 0 10upx;
            margin-left: 40px;
            min-width: 30upx;
            height: 30upx;
            background: #ff5551;
            border-radius: 15px;
            font-size: 22upx;
            font-weight: 400;
            color: #ffffff;
            line-height: 30upx;
          }

          .unMark {
            background-color: #b2b2b2;
          }
        }
      }
    }

    .cell-line-top {
      background-color: #e7efee;
    }

    .cell-item {
      padding: 0 30rpx;
    }

    .cell-item-top {
      background-color: #e7efee;
      z-index: 1;
      position: relative;
    }
  }
}

// 气泡框内容
.menu-box {
  padding: 0 30rpx;

  .menu-item {
    height: 80rpx;
    background: #0d1918;
    box-shadow: inset 0px -2rpx 0px 0px rgba(255, 255, 255, 0.05);
    line-height: 80rpx;
    font-size: 28rpx;
    font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
  }
}

.chat-type {
  display: flex;
  height: 72rpx;
  align-items: center;
  padding: 0 30rpx;
  white-space: nowrap;
  min-width: 100vw;
  width: fit-content;
  background: rgb(246, 246, 246);

  .chat-item {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    margin-right: 35rpx;
    display: flex;
    align-items: center;

    &:last-child {
      margin-right: 0;
    }
  }

  .chat-item-active {
    color: #61bdb2;
    position: relative;
  }

  .chat-item-active:after {
    position: absolute;
    content: "";
    width: 40rpx;
    height: 6rpx;
    background: #61bdb2;
    border-radius: 3rpx;
    top: 50rpx;
    left: 50%;
    transform: translate(-50%);
  }

  .num {
    width: 30rpx;
    height: 30rpx;
    background: #b2b2b2;
    border-radius: 50%;
    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 30rpx;
    text-align: center;
    margin-left: 10rpx;
  }

  .num-active {
    background: #fe6600;
  }
}
</style>
